<template>
    <div class="test">
        <MyMenu
            :a-my-menu-item-array="menuItemArrayRef"
            :a-is-collapse="isCollapseRef"
            :a-expend-width="MenuStyle.menuExpandWidth"
            :a-collapse-width="MenuStyle.menuCollapseWidth"
            :a-menu-bg-color="MenuStyle.menuBgColor"
            :a-menu-text-color="MenuStyle.menuTextColor"
            :a-menu-active-text-color="MenuStyle.menuActiveTextColor"
        />
    </div>

    <ElButton @click="toggle"> toggle</ElButton>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import MyMenu from "../my_menu_index.vue";
import MenuStyle from "./menu_color_variable.module.scss";

let menuItem1={
    name: "route-1",
    path: "dir-1",
    icon: "el-icon-edit",
    title: "title-1",
    children: [
    {
        name: "route-1-1",
        path: "dir-1-1",
        icon: "el-icon-edit",
        title: "title-1-1",
        children: [
        {
            name: "route-1-1-1",
            path: "dirL3",
            icon: "el-icon-edit",
            title: "title-1-1-1",
        }],
    }],
};

let menuItem2={
    name: "route-2",
    path: "dir-2",
    icon: "el-icon-edit",
    title: "title-2",
    children: [
    {
        name: "route-2-1",
        path: "dir-2-1",
        icon: "el-icon-edit",
        title: "title-2-1",
        children: [
        {
            name: "route-2-1-1",
            path: "dirL3",
            icon: "el-icon-edit",
            title: "title-2-1-1",
        }], 
    },
    {
        
        name: "route-2-2",
        path: "https://www.126.com",
        icon: "el-icon-edit",
        title: "title-2-2",
     }
    ],
};

let menuItem3={ 
    name: "route-3",
    path: "dir-3",
    icon: "el-icon-edit",
    title: "title-3",
}

let menuItem4={ 
    name: "route-4",
    path: "https://www.126.com",
    icon: "el-icon-edit",
    title: "title-4",
}



let menuItemArrayRef=ref([
menuItem1,menuItem2,menuItem3,menuItem4
])

const isCollapseRef = ref(false);



onMounted(()=>{
   // console.log('in mymenu tesv view');
    
})

const toggle = () => {
    isCollapseRef.value = !isCollapseRef.value;
};
</script>

<style>
/* .el-menu-vertical-demo{
    background-color: #000;
    color:#fff
} */
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.test {
    height: 800px;
}
</style>
